import { useModelStore } from "@/store/MetaModel";
import { ConfigProvider, Form, Input } from "antd";
import React from "react";
import MinimapViewer from "../common/MiniMapViewer";
import { pick } from "lodash-es";
import './FileDetail.less'
export const FileDetail = ({ nodes, edges }) => {
    const modelStore = useModelStore()
    const initialValues = pick(modelStore,
        ['vluModelType', 'vluModelName', 'vluTabSource',
            'timeCreated', 'timeUpdated', 'userCreated',
            'txtDescription', 'idSpace'])
    return <ConfigProvider form={{
        'requiredMark': false,
        'colon': false
    }} theme={{
        components: {
            Form: {
                'labelColor': '#00000088',
                'labelFontSize': 13,
                'itemMarginBottom': 10
            }
        }
    }}>
        <div style={{ height: 200, width: '100%', marginBottom: 20, pointerEvents: 'none' }} className="filedetail-minimap">
            <MinimapViewer nodes={nodes} edges={edges} height={200} width={380} />
        </div>
        <Form labelAlign={'right'} labelCol={{ span: 6 }} size="small" initialValues={initialValues} className="file-detail-form">
            <Form.Item label='标题' name='vluModelName' required>
                <Input onChange={e => modelStore.setFilename(e.target.value)} />
            </Form.Item>
            <Form.Item label='创建者' name='userCreated'>
                <Input bordered={false} disabled />
            </Form.Item>
            <Form.Item label='创建时间' name='timeCreated'>
                <Input bordered={false} disabled />
            </Form.Item>
            <Form.Item label='文件位置' shouldUpdate={() => true}>
                {
                    () => {
                        return <a href={`#${initialValues?.idSpace}`}>跳转文件位置</a>
                    }
                }
            </Form.Item>
            <Form.Item label='最后更新' name='timeUpdated'>
                <Input bordered={false} disabled />
            </Form.Item>
            <Form.Item label='节点数量'>
                <Input bordered={false} disabled value={nodes?.length ?? 0} />
            </Form.Item>
            <Form.Item label='边数量'>
                <Input bordered={false} disabled value={edges?.length ?? 0} />
            </Form.Item>
        </Form>
    </ConfigProvider>
}
